<template>
	<view class="wrap">
		<view class="logo">
			<image :src="topImage || '/static/imgs/login_top_loading.jpg'" mode="widthFix"></image>
		</view>
		<view class="main">
			<template v-if="loginMethod === 'name_code'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-account"></view>
							<input type="text" :value="form.name" @input="onInputName" placeholder="请输入姓名" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.code" @input="onInputCode" placeholder="请输入登录码" />
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByNameCode">立即登录</view>
			</template>
			<template v-else-if="loginMethod === 'number_code'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-card"></view>
							<input type="text" :value="form.number" @input="onInputNumber" placeholder="请输入编号" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.code" @input="onInputCode" placeholder="请输入登录码" />
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByNumberCode">立即登录</view>
			</template>
			<template v-else-if="loginMethod === 'phone_captcha'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-phone"></view>
							<input type="text" :value="form.phone" @input="onInputPhone" placeholder="请输入手机号" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="form.captcha" @input="onInputCaptcha" placeholder="请输入验证码" />
							<view class="s-captcha" :class="{ disable: captcha.second > 0 }" @click="onPhoneCaptcha">
								<text v-if="!captcha.retry && !captcha.second">获取验证码</text>
								<text v-else-if="captcha.second > 0">重新获取 {{ captcha.second }}秒</text>
								<text v-else-if="captcha.retry">重新获取</text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByPhoneCaptcha">立即登录</view>
			</template>
			<!-- #ifdef  MP-WEIXIN -->
			<button class="submit f-wechat open-data-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
				v-if="loginMethods.length === 1 &&  loginMethod === 'wechat_phone'">手机号快捷登录</button>
			<!-- #endif -->
			<view class="other" v-if="showOtherMethods">
				<view class="split">
					<view class="s-line"></view>
					<view class="s-text">其他登录方式</view>
					<view class="s-line"></view>
				</view>
				<view class="login-method">
					<view class="b-method f-name"
						v-if="loginMethods.indexOf('name_code') !== -1 && loginMethod !== 'name_code'"
						@click="onChangeMethod('name_code')">
						<view class="iconfont icon-key"></view>
						<view class="s-text">姓名登录码</view>
					</view>
					<view class="b-method f-number"
						v-if="loginMethods.indexOf('number_code') !== -1 && loginMethod !== 'number_code'"
						@click="onChangeMethod('number_code')">
						<view class="iconfont icon-key"></view>
						<view class="s-text">编号登录码</view>
					</view>
					<view class="b-method f-phone"
						v-if="loginMethods.indexOf('phone_captcha') !== -1 && loginMethod !== 'phone_captcha'"
						@click="onChangeMethod('phone_captcha')">
						<view class="iconfont icon-verify-fill"></view>
						<view class="s-text">手机验证码</view>
					</view>
					<!-- #ifdef  MP-WEIXIN -->
					<button class="b-method f-wechat open-data-btn" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber" v-if="loginMethods.indexOf('wechat_phone') !== -1">
						<view class="iconfont icon-phone"></view>
						<view class="s-text">手机号快捷登录</view>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<view class="tips">{{loginNote}}</view>
		</view>
		<view class="select-activity" v-if="selectActivity" @click="onJumpActivity">
			<view class="iconfont icon-dashboard"></view>
		</view>
		<com-tips :show="display.tips" title="兑换提示" :content="alertTips" @bindClose="onCloseTips"></com-tips>
	</view>
</template>

<script>
	import {
		loginByNameCode,
		loginByNumberCode,
		loginByPhoneCaptcha,
		loginByWechatPhone,
		sendPhoneCaptcha
	} from '@/service/api/user.js'
	import {
		silentReload
	} from '@/service/request/main.js'
	import {
		decodeRedirectUrl
	} from '@/common/util'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon],
		data() {
			return {
				form: {
					name: '',
					number: '',
					code: '',
					phone: '',
					captcha: '',
				},
				loginMethod: '',
				disable: {
					captcha: false,
					submit: false
				},
				display: {
					tips: false
				},
				captcha: {
					retry: false,
					second: 0,
				}
			}
		},
		onLoad(options) {
			console.log('web onLoad', options)
			// 设置场景
			this.$store.commit('setScenario', 'activity')

			this.returnPage = options.from ? decodeRedirectUrl(options.from) : '/pages/home/index'
			console.log('login returnPage', this.returnPage)
			if (! options.once) {
				console.info('login onload', 'silentReload')
				silentReload(false, this.returnPage)
			}
		},
		computed: {
			selectActivity() {
				return this.$store.getters.globalConfig.select_activity
			},
			topImage() {
				return this.$store.getters.globalConfig.login_top_img
			},
			loginNote() {
				return this.$store.getters.globalConfig.login_note || '注：仅内部使用，请选择合适的方式登录进行礼品兑换。'
			},
			alertTips() {
				return this.$store.getters.globalConfig.tips || ''
			},
			loginMethods() {
				// ['name_code','number_code',phone_captcha','wechat_phone']
				let loginMethods = this.$store.getters.globalConfig.login_methods || []
				if (loginMethods.length > 0) {
					this.loginMethod = loginMethods[0]
					console.log('this.loginMethod')
				}

				return loginMethods
			},
			showOtherMethods() {
				let show = this.loginMethods.length >= 2
				// #ifndef MP-WEIXIN
				show = this.loginMethods.length >= 3 ||
					(this.loginMethods.length === 2 && this.loginMethods.indexOf('wechat_phone') === -1)
				// #endif

				return show
			}
		},
		methods: {
			onShowTips() {
				this.display.tips = true
			},
			onCloseTips() {
				this.display.tips = false
			},
			onInputName(e) {
				// console.log('onInputName', e)
				this.form.name = e.detail.value
			},
			onInputNumber(e) {
				// console.log('onInputName', e)
				this.form.number = e.detail.value
			},
			onInputCode(e) {
				// console.log('onInputCode', e)
				this.form.code = e.detail.value
			},
			onInputPhone(e) {
				// console.log('onInputPhone', e)
				this.form.phone = e.detail.value;
			},
			onInputCaptcha(e) {
				// console.log('onInputCaptcha', e)
				this.form.captcha = e.detail.value
			},
			onChangeMethod(method) {
				this.loginMethod = method
			},
			onPhoneCaptcha() {
				if (this.disable.captcha) {
					return
				}
				this.disable.captcha = true
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					sendPhoneCaptcha(this.form.phone, res ? res.code : '', true).then(([err, res]) => {
						console.log('sendPhoneCaptcha', err, res)
						if (!err) {
							uni.showToast({
								title: '发送成功'
							})

							// 验证码倒计时
							this.captcha.second = 60
							var interval = setInterval(() => {
								this.captcha.second--
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								this.captcha.retry = true
								this.captcha.second = 0
								this.disable.captcha = false
							}, this.captcha.second * 1000)
						} else {
							this.disable.captcha = false
						}
					})
				})
			},
			onLoginByNameCode() {
				if (this.disable.submit) {
					return
				}
				if (!this.form.name) {
					return this.$logic.showToast('姓名不能为空')
				}
				if (!this.form.code) {
					return this.$logic.showToast('登录码不能为空')
				}
				this.disable.submit = true;
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					const wxCode = res ? res.code : ''
					const authKey = this.$store.getters.authKey
					loginByNameCode(this.form.name, this.form.code, wxCode, authKey).then(([err, res]) => {
						console.log('loginByNameCode', err, res)
						this.disable.submit = false
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$store.commit('setActivityId', res.activity_id)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			},
			onLoginByNumberCode() {
				if (this.disable.submit) {
					return
				}
				if (!this.form.number) {
					return this.$logic.showToast('编号不能为空')
				}
				if (!this.form.code) {
					return this.$logic.showToast('登录码不能为空')
				}
				this.disable.submit = true;
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					const wxCode = res ? res.code : ''
					const authKey = this.$store.getters.authKey
					loginByNumberCode(this.form.number, this.form.code, wxCode, authKey).then(([err, res]) => {
						console.log('loginByNumberCode', err, res)
						this.disable.submit = false
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$store.commit('setActivityId', res.activity_id)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			},
			onLoginByPhoneCaptcha() {
				if (this.disable.submit) {
					return
				}
				if (!this.form.phone) {
					return this.$logic.showToast('手机号不能为空')
				}
				if (!this.form.captcha) {
					return this.$logic.showToast('验证码不能为空')
				}
				this.disable.submit = true
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					const wxCode = res ? res.code : ''
					const authKey = this.$store.getters.authKey
					loginByPhoneCaptcha(this.form.phone, this.form.captcha, wxCode, authKey).then(([err,
						res
					]) => {
						console.log('loginByPhoneCaptcha', err, res)
						this.disable.submit = false
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$store.commit('setActivityId', res.activity_id)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			},
			onGetPhoneNumber(e) {
				console.log('onGetPhoneNumber', e)
				if (e.detail.errMsg.indexOf(':ok') === -1) {
					// fail user deny
					// this.$logic.showToast(e.detail.errMsg.replace('getPhoneNumber:', ''))
					return
				}
				uni.showLoading({
					title: '尝试登录中'
				})
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					loginByWechatPhone(e.detail.encryptedData, e.detail.iv, e.detail.code || '', res.code).then(([
						err, res
					]) => {
						console.log('loginByWechatPhone', err, res)
						uni.hideLoading()
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$store.commit('setActivityId', res.activity_id)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			},
			onJumpActivity() {
				uni.redirectTo({
					url: '/pages/home/dashboard'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: #ffffff;
	}

	.wrap {}

	.logo {
		image {
			width: 100%;
			height: 460upx;
		}
	}

	.main {
		padding: 50upx;
	}

	.form {
		.b-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30upx;
			border-bottom: 1upx solid #E5E5E5;
		}

		.b-input {
			flex: 1;
			padding: 0 20upx;
			width: 100%;
			height: 90upx;
			display: flex;
			align-items: center;

			.s-icon {
				color: #ccc;
				font-size: 40upx;
			}

			input {
				margin-left: 30upx;
				flex: 1;
				color: #333;
				font-size: 28upx;
			}

			.s-captcha {
				padding: 0 30upx;
				background: #fff;
				border: 2upx #ccc solid;
				height: 64upx;
				line-height: 64upx;
				border-radius: 32upx;
				color: #808080;
				font-size: 24upx;

				&.disable {
					color: #999;
				}
			}
		}
	}

	.submit {
		margin-top: 80upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: #DA5650;
		border-radius: 50upx;
		letter-spacing: 10upx;

		&.f-wechat {
			background: #35C773;
		}

		&.disable {
			background: rgba($color: #DA5650, $alpha: 0.2);
		}
	}

	.split {
		margin-top: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.s-line {
			width: 200upx;
			height: 1upx;
			background: #eee;
		}

		.s-text {
			font-size: 28upx;
			color: #808080;
		}
	}

	.login-method {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		.b-method {
			margin: 0 20upx 20upx 20upx;
			width: 250upx;
			// padding: 0 20upx;
			height: 80upx;
			border-radius: 10upx;
			background: #808080;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			&.f-name {
				background: #64A2FA;
			}

			&.f-number {
				background: #EE6C77;
			}

			&.f-phone {
				background: #FF9C45;
			}

			&.f-wechat {
				background: #35C773;
			}

			.iconfont {
				margin-right: 10upx;
				font-size: 40upx;
			}

			.s-text {
				font-size: 26upx;
			}
		}
	}

	.tips {
		margin-top: 50upx;
		width: 100%;
		color: #383838;
		font-size: 24upx;
		text-align: center;
	}

	.select-activity {
		position: absolute;
		bottom: 50upx;
		right: 50upx;
		background: #fff;
		border: 2upx solid #ddd;
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			font-size: 50upx;
			color: #DA5650;
		}
	}
</style>
